<template>
    <div class="page-wrap">
        <h2>使用固定定位，可随意拖拽位置的组件，内容由插槽提供</h2>

        <h3>基本使用</h3>
        <div>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>参数</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3 style="color: #409EFF;">右上角看效果</h3>
        <zll-drag-box bottom="20px" right="20px">
            <div class="back-button" @click="goBack"></div>
        </zll-drag-box>
    </div>
</template>

<script>
import zllDragBox from '@/components/zll-drag-box.vue'
export default {
    components: {
        zllDragBox
    },
    data() {
        return {
            code: `<zll-drag-box top="0" left="0">
    <el-button icon="el-icon-place" circle type="success"></el-button>
</zll-drag-box>`,
            tableData: [
                {
                    name: "draggable", type: "Boolean",
                    description: "是否开启拖拽，默认是"
                },
                {
                    name: "left/right/top/bottom", type: "Strting",
                    description: "位置信息"
                },
                {
                    name: "zIndex", type: "Number",
                    description: "层级,默认99"
                }
            ],
        }
    },
    methods: {
        goBack() {
            this.$message('点击了返回！')
            //this.$router.go(-1); // 返回上一页
        }
    }
}
</script>


<style scoped>
.back-button {
  width: 75px;
  height: 75px;
  background-color: rgb(51 51 51 / 60%);
  background-image: url(@/assets/icons/go-back.png);
  background-size: 55% 55%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
</style>